<template>
    <div class="nocenter">
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column label="标题" prop="title" />
      <el-table-column label="日期" prop="date" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">查看</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { computed, onBeforeMount, ref } from 'vue';
import axios from 'axios';
import { useRouter } from "vue-router";

const tableData = ref<User[]>([]);
const router = useRouter();

interface User {
  title: string;
  date: string;
}

const fetchTableData = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:5000/news_show', {
      code: 0,
      class: "活动预告"
    }, {
      headers: {
        'Content-Type': 'application/json'
      },
    });
    tableData.value = response.data as User[];
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
};

const search = ref('');
const filterTableData = computed(() =>
  tableData.value.filter(data =>
    !search.value || data.title.toLowerCase().includes(search.value.toLowerCase())
  )
);

const handleEdit = (row: User) => {
  const routeData = router.resolve({
    path: '/newsdetail',
   });
   localStorage.setItem('newstitle', row.title);
  window.open(routeData.href, '_blank');
};

const handleDelete = (row: User) => {
  console.log(row);
};

onBeforeMount(fetchTableData);
  </script>

  <style>
  .nocenter {
    align-self: flex-start; /* 或者使用 "self-start" */
    margin: 0; /* 移除任何可能的自动margin */
    margin-left: 30px; /* 或者你想要的任何值 */
    width: 900px;
}
  </style>